<template>
	<view class="page">
		<view class="title_wap">
			<view class="title_icon">
				<image src="/static/icon/tong_guo@3x.png" mode="scaleToFill" />
			</view>
			<view class="title_text">{{ name }}，恭喜您的预审已通过！</view>
		</view>
		<view class="card">
			<view class="card_t">
				<text>{{ row.name }}</text>
				<text>机构信息</text>
			</view>
			<view class="card_b">
				<view class="card_m">
					<text>￥</text>
					<text>{{ row.quota }}</text>
				</view>
				<view class="card_b--text">额度{{ row.quota_min }}万~{{ row.quota_max }}万元</view>
			</view>
		</view>
		<view class="call-group">
			<view class="call-item">
				<text>贷款期限</text>
				<text>12期</text>
			</view>
			<view class="call-item">
				<text>月利率</text>
				<text>{{ row.rate_month }}%</text>
			</view>
			<view class="call-item">
				<text>预估利息{{ row.lxTotal }}元，月均还款{{ row.repaymentMoney }}元</text>
				<text></text>
			</view>
		</view>
		<view class="btn" @click="open">确认申请借款</view>
		<view class="dec">
			<view class="dec-iitem">温馨提示:</view>
			<view class="dec-iitem">
				1、该产品需电话审核，
				<text>不上征信，建议申请哦。</text>
			</view>
			<view class="dec-iitem">2、下款前任何收取费用的行为，均为诈骗行为，请您保持警惕，如遇诈骗可联系客服.</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pop-card">
				<view class="pop-title">返回将撤销您的预审资料</view>
				<view class="pop-title">确定返回吗?</view>
				<view class="pop-btn" @click="close">取消</view>
				<view class="btn-txt">确定返回</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import ajax from '@/api'
export default {
	components: {},
	data() {
		return {
			name: '',
			row: {}
		}
	},
	computed: {},
	watch: {},
	onLoad() {},
	onShow() {
		this.init()
	},
	onReady() {},
	// 方法集合
	methods: {
		async init() {
			try {
				const result = await ajax.getCommend()
				this.name = result.name
				this.row = result.row
			} catch (error) {
				console.log(error)
			}
		},
		open() {
			this.$refs.popup.open('center')
		},
		close() {
			this.$refs.popup.close()
		}
	},
	onHide() {},
	onUnload() {}
}
</script>
<style lang="scss" scoped>
.pop-card {
	width: 606rpx;
	height: 484rpx;
	padding: 60rpx 80rpx;
	background: #fff;
	border-radius: 16rpx;
	.pop-title {
		text-align: center;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.pop-btn {
		margin-top: 60rpx;
		height: 88rpx;
		background: #3478f2;
		line-height: 88rpx;
		text-align: center;
		border-radius: 16rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}
	.btn-txt {
		margin-top: 60rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-align: center;
		color: #696969;
	}
}
.dec {
	margin-top: 450rpx;
	.dec-iitem {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #969799;
		text {
			color: #3478f2;
		}
	}
}
.page {
	padding: 40rpx 32rpx;
	background: #fff;
	height: 100vh;
	.card {
		height: 286rpx;
		padding: 24rpx;
		margin-top: 44rpx;
		background: #ffffff;
		border: 1rpx solid #d7d7d7;
		box-shadow: 0px 0px 20rpx rgba(11, 137, 254, 0.08);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.title_wap {
		margin-top: 8rpx;
		display: flex;
		align-items: center;
		.title_icon {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			box-shadow: 0px 0px 12rpx #d6ffc6;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.title_text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #58bf30;
			margin-left: 12rpx;
		}
	}
}
.btn {
	margin-top: 96rpx;
	height: 92rpx;
	line-height: 92rpx;
	background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
	border-radius: 70rpx;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
}
.btn:active {
	opacity: 0.5;
}
.card_t text:nth-of-type(1) {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.card_t text:nth-of-type(2) {
	width: 152rpx;
	height: 56rpx;
	line-height: 56rpx;
	text-align: center;
	background: #3478f2;
	border-radius: 70rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.card_m {
	display: flex;
	align-items: center;
}
.card_m text:nth-of-type(1) {
	font-size: 64rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #333333;
}
.card_m text:nth-of-type(2) {
	font-size: 80rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #333333;
}
.card_t,
.card_b {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.card_b--text {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #b0b0b0;
}
.call-group {
	margin-top: 24rpx;
	.call-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #464646;
			margin-top: 16rpx;
		}
	}
}
</style>
